<template>
	<view class="content">
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="localDataList" @query="queryList"
			:fixed="false">
			<view class="post-item" v-for="(item, index) in localDataList" :key="index" @click="itemClick(item)">
				<uni-swiper-dot :info="item.imageList" :current="current" field="content" @clickItem="clickItem"
					:mode="mode" :dots-styles="dotsStyles">
					<view class="post-overlay-container">
						<swiper class="post-image-container" :autoplay="true" @change="change" :indicator-dots="false"
							:circular="true" :interval="3000" :duration="500">
							<swiper-item v-for="(img, imgIndex) in item.imageList" :key="imgIndex">
								<image class="post-image" :src="img" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
						<!-- 浮动层: 位置信息和游玩人数 -->
						<view class="image-overlay">
							<text class="location-info" >{{ item.startRoute }} → {{ item.endRoute }}</text>
							<text class="visitor-count">{{ item.playCount }}人游玩过</text>
						</view>
						<!-- 浮动层: 距离和游玩路线按钮 -->
						<view class="distance-route">
							<text class="distance-info">约{{ item.distance }}米</text>
							<view class="route-btn">
								<image class="btn-icon" src="/static/uniAppLogo.png" mode="aspectFit"></image>
								<text class="btn-text">游玩路线</text>
							</view>
						</view>
					</view>
				</uni-swiper-dot>

				<view class="engagement-stats">
					<view class="stat-item">
						<uni-icons type="heart" size="30" color="#999"></uni-icons>
						<text>{{ item.loveCount }}</text>
					</view>
					<view class="stat-item">
						<uni-icons type="star" size="30" color="#999"></uni-icons>
						<text>{{ item.collectCount }}</text>
					</view>
					<view class="chat-item">
						<view class="stat-item">
							<image class="chat-image" src="/static/comment.png" mode="aspectFill"></image>
							<text>{{ item.commentCount }}</text>
						</view>
					</view>
				</view>

				<text class="post-caption">{{ item.title }}</text>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { getMyPost } from '@/api/user.js'; // 引入登录接口
	export default {
		name: "LineItem",
		data() {
			return {
				firstLoaded: false,
				isCurrentPage: false,
				current: 0,
				swiperDotIndex: 0,
				mode: 'dot',
				localDataList: [], // 新增本地数据属性来存储和管理 dataList
				dotsStyles: {
					bottom: 0,
					backgroundColor: 'rgba(192, 192, 192, 0.3)', // 未选中时为浅灰色
					border: '1px rgba(192, 192, 192, 0.3) solid', // 边框也是浅灰色
					color: '#fff', // 未选中文本颜色
					selectedBackgroundColor: 'rgba(0, 122, 255, 0.9)', // 选中时为深蓝色
					selectedBorder: '1px rgba(0, 122, 255, 0.9) solid' // 选中边框为深蓝色
				}
			}
		},
		props: {
			tabIndex: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			currentIndex: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			dataList: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex && !this.isCurrentPage) {
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								}, 100);
							});
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			clickItem(e) {
				this.swiperDotIndex = e
			},
			change(e) {
				this.current = e.detail.current;
			},
			reload() {
				this.$nextTick(() => {
					this.$refs.paging && this.$refs.paging.reload();
				});
			},
			queryList(pageNo, pageSize) {
				const response = getMyPost(pageNo, pageSize,this.currentIndex).then(response => {
						// 更新用户信息和登录状态
						if (response.code == 200) {
							this.$refs.paging.complete(response.data.list);
							this.firstLoaded = true;
						} else {

						}
					});
			},
			handleSwiperChange(event) {
				this.currentImgIndex = event.detail.current; // 更新当前索引
			},
			itemClick(item) {
				console.log('点击了', item.title);
				uni.navigateTo({
					url: "/packageMixture/pages/postDetails/postDetails?postId="+item.id
				})
			}
		}
	};
</script>

<style scoped>
	.content {
		height: 100%;
	}

	.post-item {
		background-color: #ffffff;
		margin-bottom: 16px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.post-overlay-container {
		position: relative;
		width: 100%;
		height: 300px;
	}

	.post-image-container {
		width: 100%;
		height: 290px;
	}

	.post-image {
		width: 100%;
		height: 290px;
	}

	.image-overlay {
		position: absolute;
		bottom: 52px;
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;

	}

	.location-info {
		color: #ffffff;
		font-size: 17px;
		border-radius: 4px;
		margin-left: 16px;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8)
	}

	.visitor-count {
		color: lightgray;
		width: 180rpx;
		font-size: 17px;
		border-radius: 4px;
		margin-right: 16px;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5)
	}

	.distance-route {
		position: absolute;
		bottom: 20px;
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5)
	}

	.distance-info {
		color: lightgray;
		font-size: 17px;
		margin-left: 16px;
		width: fit-content;
		height:48rpx;
	}

	.route-btn {
		background-color: #007AFF;
		margin-right: 16px;
		width: 115px;
		height: 28px;
		color: #ffffff;
		border-radius: 38px;
		border: none;
		display: flex;
		/* 使用 flex 布局 */
		align-items: center;
		/* 垂直居中 */
	}

	.btn-icon {
		margin-left: 12px;
		width: 18px;
		/* 图标宽度 */
		height: 18px;
		/* 图标高度 */
		margin-right: 4px;
		/* 图标与文字间的间距 */
	}

	.btn-text {
		font-size: 17px;
		/* 字体大小 */
		font-weight: 400;
		/* 字体粗细 */
	}

	.engagement-stats {
		display: flex;
		flex-direction: row;
		padding: 12px;
		width: 100%;
		right: 0px;
		justify-content: flex-end;
	}

	.chat-item {
		margin-right: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.chat-image {
		width: 25px;
		height: 25px;
	}

	.stat-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 16px;
	}

	.stat-item text {
		margin-left: 4px;
		color: #999;
		font-size: 16px;
	}

	.post-caption {
		padding: 12px;
		font-size: 17px;
		line-height: 150%;
		color: #181818;
	}
</style>